<template>
  <div class="app_content_container">
    <Breadcrumb
      :items="[{ label: '操作系统', path: '/model-mgmt/operating-system' }, name]"
    />
    <div class="app_content_box">
      <Tabs
        v-model="activeKey"
        style="padding: 0 16px"
        :list="operatingSystemList"
        @tabChange="tabChange"
      >
      </Tabs>
      <component :is="componentName" :id="id"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { operatingSystemList, formateTemplateType } from "@/constant";
const router = useRouter();
const route = useRoute();
const { id } = route.params;
const { name, tab } = route.query;
const componentName = ref(null);
const activeKey = ref(tab || operatingSystemList[0]["value"]);
// 加载组件
const loadModule = async (moduleName) => {
  const module = await import(`./${moduleName}/index.vue`);
  componentName.value = module.default;
};
// 处理方法
const tabChange = (val) => {
  loadModule(val);
  router.replace({
    path: route.fullPath,
    query: { ...route.query, tab: val },
  });
};
onMounted(() => {
  loadModule(activeKey.value);
});
</script>

<style lang="scss" scoped></style>
